import React, {Component} from 'react';
// 链接按钮  商品页的添加商品按钮
import LinkButton from "../Public/LinkButton";
// 商品表格
import ProductTable from './ProductTable';
// 搜索组件
import Search from '../Public/Search';
// 分页组件
import Pagination from '../Public/Pagination';
// http对象
import http from '../../http';
// 商品管理页面样式
import '../../assets/css/productIndex.scss';

// 商品管理首页组件
class Index extends Component {
	constructor(props) {
		super(props);
		this.state = {
			// 页码
			pageNum: 1,
			// 数据总数
			total: 0,
			// 每页显示数量
			pageSize: 10,
			// 数据列表
			list: [],
			// 下拉列表选择内容
			select: 'productId',
			// 搜索框内容
			search: '',
			// 搜索组件的搜索方法
			searchMethods: [
				{
					value: 'productId',
					title: '按商品id查询'
				},
				{
					value: 'productName',
					title: '按商品名称查询'
				}
			]
		}
	}

	// 当组件挂载完成之后
	componentDidMount() {
		// 调用获取数据方法
		this.getProductList();
	}

	// 获取商品管理列表的数据
	getProductList = () => {
		// 传入pageNum当前页码
		http.getProductList(this.state.pageNum).then(res => {
			// 如果返回状态码为0说明正常
			if (res.status === 0) {
				// 设置数据总数，每页显示数量，数据列表
				this.setState({
					total: res.data.total,
					pageSize: res.data.pageSize,
					list: res.data.list
				})
				//  如果返回状态码为10说明管理员未登录
			} else if (res.status === 10) {
				//  弹出返回数据
				alert(res.msg);
				//  跳到登录页面
				this.props.history.push('/login');
			}
		})
	};

	// 搜索商品
	searchProductList = () => {
		// 定义params，listType默认为search，pageNum为当前页码
		let params = {
			listType: 'search',
			pageNum: this.state.pageNum
		};
		// 设置对应的搜索选项，值为当前搜索的值
		params[this.state.select] = this.state.search;
		// 搜索，传入params
		http.searchProductList(params).then(res => {
			//返回状态值为0，说明正常
			if (res.status === 0) {
				// 设置数据总数，每页显示数量，数据列表
				this.setState({
					total: res.data.total,
					pageSize: res.data.pageSize,
					list: res.data.list
				})
			}
		})
	};

	// 点击搜索功能  使用async函数
	clickSearch = async () => {
		// await等待设置pageNum完成之后
		await this.setState({
			pageNum: 1
		})
		// 调用搜索数据方法
		this.searchProductList();
	};

	// 分页页码发生改变  使用async函数
	changePageNum = async pageNum => {
		// await等待设置pageNum完成之后
		await this.setState({
			pageNum
		})
		// 调用搜索数据方法
		this.searchProductList();
	}

	// 下拉列表数据绑定
	changeSelect = select => {
		this.setState({
			select
		})
	};

	// 搜索框数据绑定
	changeSearch = search => {
		this.setState({
			search
		})
	};

	render() {
		return (
			<div className="product-index">
				<div className="home-title">
					<span>商品管理</span>
					{/*LinkButton组件，to表示跳转的路径，内容表示显示的内容*/}
					<LinkButton to="/product/save">添加商品</LinkButton>
				</div>
				<div className="product-index-search">
					{/*search组件，select是下拉列表的数据，search是搜索框的数据，searchMethods是下拉列表的列表项，changeSelect方法双向绑定select数据，changeSearch方法双向绑定search数据，clickSearch方法定义点击查询按钮的方法*/}
					<Search
						select={this.state.select}
						search={this.state.search}
						searchMethods={this.state.searchMethods}
						changeSelect={this.changeSelect}
						changeSearch={this.changeSearch}
						clickSearch={this.clickSearch}
					/>
				</div>
				{/*商品管理表格，list是数据列表，getProductList是查询数据的方法，在修改完商品上架下架之后调用*/}
				<ProductTable
					list={this.state.list}
					getProductList={this.searchProductList}
				/>
				{/*分页组件，pageSize定义每页显示数量，pageNum定义当前页码，total定义数据总数，onChange方法监听页码变化*/}
				<Pagination
					pageSize={this.state.pageSize}
					pageNum={this.state.pageNum}
					total={this.state.total}
					onChange={this.changePageNum}
				/>
			</div>
		);
	}
}

export default Index;